<style scoped>
    .container {
        width: 100vw;
        position: relative;
    }

    .answer-bg {
        position: absolute;
        top: 0px;
    }

    .title {
        width: 40.8vw;
        margin-left: 35vw;
    }

    .topic {
        width: 64.9vw;
        border: 4px solid #ffe88a;
        border-radius: 10px;
        /*border-image: url("../../static/images/border_bg.jpg") 30 30 round;*/
        background: rgba(0, 0, 0, 0.5);
        margin: 0px auto;
        margin-top: 18.4vw;
        position: relative;
        padding: 6.6vw;
        padding-top: 10.6vw;
    }

    .logo {
        position: absolute;
        width: 23vw;
        left: 28.4vw;
        top: -12.6vw;
    }

    .topic-title {
        font-size: 4.8vw;
        line-height: 7vw;
        text-indent: 2em;
        color: #f1ca97;
    }

    .timeline {
        width: 79.3vw;
        margin: 0px auto;
        margin-top: 3.4vw;
    }

    .timeline-box {
        width: 66.6vw;
        height: 1.3vw;
        border: 1px solid #591008;
        border-radius: 1.3vw;
        background: url("../../static/images/border_bg.jpg");
        float: left;
    }

    .timeline-time {
        float: left;
        font-size: 2.1vw;
        color: #ffe88a;
        position: relative;
        top: -3px;
        left: 5px;
        width:11.7vw;
        white-space:nowrap;
    }

    .timeline-box-internal {
        width: 2%;
        height: 1.3vw;
        border-radius: 1.3vw;
        background: #b22919;
        float: right;
    }

    @keyframes internal {
        from {
            width: 2%;
        }
        to {
            width: 100%;
        }
    }

    @keyframes internal2 {
        from {
            width: 2%;
        }
        to {
            width: 100%;
        }
    }

    .internal {
        animation: internal 9s linear;
    }

    .internal2 {
        animation: internal2 9s linear;
    }

    .subject {
        width: 67.1vw;
        padding: 3.2vw 6.1vw;
        margin: 0px auto;
        border: 2px solid #ffe88a;
        border-radius: 10px;
        margin-top: 4vw;
        background: rgba(0, 0, 0, 0.5);
        font-size: 2.6vw;
        color: #f1ca97;
    }

    .subject-li {
        width: 66vw;
        margin: 0 auto;
        margin-top: 2.4vw;
        text-indent: 5vw;
        padding: 2.2vw 0px;
        font-size: 4.8vw;
        color: #f1ca97;
        background: #b22919;
        border: 2px solid #ffe88a;
        border-radius: 5px;
    }

    .subject-bottom {
        font-size: 2.1vw;
        color: #f1ca97;
        text-align: center;
        margin-top: 2.4vw;
    }

    .hint-img {
        width: 48.9vw;
        display: block;
        margin: 0px auto;
        margin-top: 45.8vw;
    }

    .correct, .mistake {
        display: none;
    }

    .main{
        position: absolute;
        top: 71vw;
        left: 9.8vw;
    }
</style>
<template>
    <div class="Answer">
        <img class="answer-bg img-responsive" src="http://static.bestpeng.com/static/images/answer_bg.jpg" alt="">
        <div class="container">
            <div class="title"><img class="img-responsive" v-bind:src="titleUrl" alt=""></div>
            <div class="topic">
                <img class="logo" src="http://static.bestpeng.com/static/images/logo.png" alt="">
                <div class="topic-title">{{topic}}</div>
            </div>
            <div class="main">
                <div class="timeline">
                    <div class="timeline-box">
                        <div class="timeline-box-internal"></div>
                    </div>
                    <div class="timeline-time">倒计时{{internal}}"</div>
                    <div class="clear"></div>
                </div>
                <div class="subject">
                    <div class="subject-top over">
                        <div class="subject-top-integral pull-left">我的积分：{{grade}}分</div>
                        <div class="subject-top-residue pull-right">已答{{reply}}/{{topicNumber}}</div>
                    </div>
                    <ul class="subject-ul">
                        <li class="subject-li"
                            v-for="(item, index) in subjectList"
                            v-bind:result="index"
                            @click="select($event)"
                        >
                            {{index}} : {{item}}
                        </li>
                    </ul>
                    <p class="subject-bottom">点击选项，完成答题</p>
                </div>
            </div>
            <!--免费获得积分弹框-->
            <div class="free shade">
                <img class="hint-img" src="http://static.bestpeng.com/static/images/answer_free.png" alt="">
            </div>
            <!--回答正确-->
            <div class="correct shade">
                <img class="hint-img" src="http://static.bestpeng.com/static/images/answer_correct.png" alt="">
            </div>
            <!--回答错误-->
            <div class="mistake shade">
                <img class="hint-img" src="http://static.bestpeng.com/static/images/answer_mistake.png" alt="">
            </div>
            <audio id="correct-audio">
                <source src="static/audio/correct.mp3" type="audio/mp3" />
            </audio>
            <audio id="mistake-audio">
                <source src="static/audio/mistake.mp3" type="audio/mp3" />
            </audio>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Answer',
        data () {
            return {
                topicList: [
                    {
                        topic: '您现在收看的节目是？',
                        subjectList: {
                            A: '《国乐大典》',
                            B: '《老广的味道》',
                            C: '《中国梦》',
                            D: '《社会纵横》'
                        },
                        result: 'A'
                    },
                    {
                        topic: '	以下哪一位是《国乐大典》的鉴赏团嘉宾？',
                        subjectList: {
                            A: '郭蕾',
                            B: '方锦龙',
                            C: '王牧笛',
                            D: '屈炫希'
                        },
                        result: 'B'
                    },
                    {
                        topic: '《国乐大典》每期有几支乐队参与竞演？',
                        subjectList: {
                            A: '6',
                            B: '60',
                            C: '80',
                            D: '90'
                        },
                        result: 'A'
                    },
                    {
                        topic: '《国乐大典》的花絮节目叫？',
                        subjectList: {
                            A: '《国乐正飞扬》',
                            B: '《生活大数据》',
                            C: '《直播全球》',
                            D: '《天气预报》'
                        },
                        result: 'A'
                    }
                ], // 总题目
                topic: '', // 题目
                subjectList: {}, // 选项
                result: '', // 当前题目正确答案key
                internal: 9, // 答题剩余时间
                grade: 0, // 当前分数
                reply: 0, // 已答
                topicNumber: 4, // 题目数量
                ineterId: null, // 答题id
                isInter: true, // 是否开启定时器
                titleUrl: 'http://static.bestpeng.com/static/images/answer_first_0.png', // 当前题目图片链接
            }
        },
        created (){
            var that = this

            // 初始显示
            that.free();

            // 赋值题目
            that.updateTopic(1)

            // 添加分数
            that.addGrade()
        },
        methods: {
            // 初始免费送积分
            free: function () {
                var that = this

                setTimeout(function () {
                    $('.free').fadeToggle(1000);

                    // 延迟动画时间
                    setTimeout(function () {
                        $('.timeline-box-internal').addClass('internal');
                        that.timer();
                    }, 1000)
                }, 1000)
            },
            // 回答正确
            correct: function () {
                var that = this

                // 添加答题数量
                that.reply++;

                // 播放音效
                $('#correct-audio')[0].play()

                // 停止定时器
                clearInterval(that.ineterId)
                that.isInter = true

                that.addGrade()

                // 显示提示框
                $('.correct').show()

                // 进入下一题
                setTimeout(function () {
                    $('.correct').hide()
                    that.updateTopic();
                }, 1000)
            },
            // 回答错误或超时
            mistake: function () {
                var that = this

                // 添加答题数量
                that.reply++;

                // 播放音效
                $('#mistake-audio')[0].play()

                $('.mistake').fadeIn();

                // 停止定时器
                clearInterval(that.ineterId)
                that.isInter = true

                // 进入下一题
                setTimeout(function () {
                    $('.mistake').fadeOut()
                    that.updateTopic();
                }, 1000)
            },
            // 答题计时器
            timer: function () {
                var that = this

                if (that.isInter) {
                    that.ineterId = setInterval(() => {
                        var isInternal = that.internal;
                        if (isInternal > 0) {
                            that.internal = isInternal - 1;
                        } else {
                            that.mistake();
                        }
                    }, 1000)

                    // 关闭定时器
                    that.isInter = false
                }
            },
            // 更新题目
            updateTopic: function (number) {
                // 更新题目
                var that = this;

                // 判断答题是否已完
                if(that.reply >= 4){
                    location.href = "#/Finish"
                }

                that.topic = that.topicList[that.reply].topic;
                that.subjectList = that.topicList[that.reply].subjectList;
                that.result = that.topicList[that.reply].result;
                that.titleUrl = 'http://static.bestpeng.com/static/images/answer_first_'+ that.reply +'.png';

                // 重新播放动画
                if ($('.timeline-box-internal').hasClass('internal')) {
                    $('.timeline-box-internal').attr('class', 'timeline-box-internal internal2');
                } else {
                    $('.timeline-box-internal').attr('class', 'timeline-box-internal internal');
                }

                // 更新时间秒数
                that.internal = 9;

                // 触发定时器
                if(number == 1) {
                    setTimeout(function (){
                        that.timer();
                    }, 2000)
                } else {
                    that.timer();
                }

            },
            // 答题
            select: function (e) {
                var el = $(e.currentTarget);

                if (el.attr('result') == this.result) {
                    this.correct()
                } else {
                    this.mistake();
                }
            },
            // 添加分数
            addGrade: function () {
                var that = this;

                // 答对加10分
                that.grade = that.grade + 10;

                // 添加本地缓存的分数
                localStorage.setItem('reply', that.grade);

            }
        }
    }
</script>